<template>
  <div>
    <div style="margin-bottom: 30px">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/orders' }">订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>添加订单</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-form ref="orders" :model="orders" :rules="rules" label-width="80px" style="width: 300px;margin: 0 auto">
      <el-form-item label="用户：" prop="" required>
        <el-select v-model="user" placeholder="请选择用户" value-key="uid" @change="userChanged">
          <el-option
              v-for="user in allUser"
              :key="user.uid"
              :label="user.uname"
              :value="user">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品：" prop="" required>
        <el-select v-model="goods" placeholder="请选择商品" value-key="gid" @change="goodsChanged">
          <el-option
              v-for="goods in allGoods"
              :key="goods.gid"
              :label="goods.gname"
              :value="goods">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品单价:" v-show="goods.gid">
        <span>{{ goods.price }}</span>
      </el-form-item>
      <el-form-item label="商品库存:" v-show="goods.gid">
        <span>{{ goods.inventory }}</span>
      </el-form-item>
      <el-form-item label="数量:" v-show="goods.gid" prop="goodsCount">
        <el-input-number v-model="orders.goodsCount" :min="1" :max="goods.inventory"
                         @change="numChange"></el-input-number>
      </el-form-item>
      <el-form-item label="订单金额:" v-show="goods.gid">
        <span>{{ orders.sumPrice }}元</span>
      </el-form-item>
      <el-form-item label="订单名称:">
        <span style="color:#E6A23C;">系统自动生成</span>
      </el-form-item>
      <el-form-item label="创建时间:">
        <span style="color:#E6A23C;">系统自动生成</span>
      </el-form-item>
      <el-form-item label="状态：" prop="state">
        <el-input v-model="orders.state" autocomplete="off" style="width: 200px;"></el-input>
      </el-form-item>
      <div style="text-align: center">
        <el-button type="primary" @click="save('orders')" size="medium">添加</el-button>
        <el-button type="warning" @click="reset" size="medium">重置</el-button>
      </div>

    </el-form>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "AddOrders",
  data() {
    return {
      allGoods: [],
      allUser: [],
      goods: {},
      user: {},
      orders: {},
      rules: {
        goodsCount: [
          {required: true, message: '请输入购买数量', trigger: 'blur'},
        ],
        state: [
          {required: true, message: '请输入订单状态', trigger: 'blur'},
        ]
      },
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      request.get("/user/findall").then(res => {
        this.allUser = res
      });
      request.get("/goods/findall").then(res => {
        this.allGoods = res
      })
    },
    numChange(num) {
      this.orders.sumPrice = (num * this.goods.price).toFixed(2)
    },
    save(orders) {
      if (!this.user.uid || !this.goods.gid) {
        this.$message.warning("请选择用户和商品")
      } else {
        this.orders.ordersName = this.user.uname +
            " 购买 " + this.goods.gname + " * " + this.orders.goodsCount + " 的订单 "
        console.log(this.orders)
        this.$refs[orders].validate((valid) => {
          if (valid) {
            request.post("orders/save",this.orders).then(res=>{
              if (res){
                this.$message.success("添加成功")
                this.$router.push('orders')
              }else {
                this.$message.error("添加失败")
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }

    },
    userChanged() {
      this.orders.uid = this.user.uid
    },
    goodsChanged() {
      this.orders.gid = this.goods.gid
    },
    reset() {
      this.user = {}
      this.goods = {}
      this.orders = {}
      this.load()
    }
  }
}
</script>

<style scoped>

</style>